<template>
  <div class="relative overflow-hidden">
    <div class="main-bg"></div>
    <div class="z-9 flex flex-center flex-col w-full py-16px text-white relative">
      <span class="text-20px font-bold">化工工业链</span>
    </div>
    <!-- <div class="p-8px bg-white z-99 relative">
      
    </div> -->
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        :options="categoryList"
        :title="value1 ? categoryList.find((item) => item.value === value1).text : '产业链分类'"
      />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
  </div>
  <div class="w-full pt-8px pb-16px px-8px bg-[#eee]">
    <Menu :menuIndex="0" :path="'/ordersquare/detail'" />
    <Menu :menuIndex="1" :path="'/ordersquare/detail'" />
    <Menu :menuIndex="2" :path="'/ordersquare/detail'" />
    <Menu :menuIndex="3" :path="'/ordersquare/detail'" />
    <Menu :menuIndex="4" :path="'/ordersquare/detail'" />
  </div>
</template>

<script setup>
import { reactive, ref, onActivated } from 'vue'
import Menu from './components/leftDetail.vue'
import { useConfigStore } from '@/stores/config'

const value1 = null
const value2 = 'a'
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '热度最高', value: 'b' },
  { text: '时间升序', value: 'c' },
  { text: '时间降序', value: 'd' },
]
const categoryList = ref([])

const init = async () => {
  const config = useConfigStore()
  const res = await config.initChainTree()
  categoryList.value = res.map((item) => {
    return {
      text: item.name,
      value: item.id,
    }
  })
  console.log(categoryList.value)
}

init()

onActivated(() => {
  init()
})
</script>

<style lang="scss" scoped>
.main-bg {
  position: absolute;
  background-image: url(@/assets/image/communication2.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  z-index: 0;
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.95;
    background: linear-gradient(to right, #1e2125, #323a46);
  }
}
</style>
